<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<label>
    <input type="text">
</label>
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>

<script>
    let input = document.querySelector('input');
    let set = document.querySelector('.set');
    let get = document.querySelector('.get');
    let remove = document.querySelector('.remove');
    let del = document.querySelector('.del');

    // 存储数据
    let key = "my_token";
    set.addEventListener('click', function () {
        let value = input.value;
        window.localStorage.setItem(key, value);
    })

    get.addEventListener('click', function () {
        let token = window.localStorage.getItem(key);
        // window.localStorage.toString()
        console.log(`my_token: ${token}`)
    })
    remove.addEventListener('click', function () {
        window.localStorage.removeItem(key);
        console.log(`删除 ${key} 成功`)
    })
    // 删除所有数据
    del.addEventListener('click', function () {
        window.localStorage.clear();
    })
</script>
</body>
</html>
